/**
 * Created by sunguodong on 2021/12/31.
 * Email: sungd@tongtech.com
 * Description: ArGIS 地图中的应用方法
*/

import './index.less';
import React, {useEffect} from "react";
import * as esriLoader from 'esri-loader';
import { Button } from "antd";
import icon from "../../image/gis_5g_station_normal.svg";
const options = {   
    url: 'https://js.arcgis.com/3.39/',
}
esriLoader.loadScript(options);

export const MapHeatOverlays: React.FC = () => {
    function componentDid() {

        esriLoader.loadModules([
            "esri/map",
            "dojo/number",
            "esri/InfoTemplate",
            "esri/layers/FeatureLayer",
            "esri/renderers/HeatmapRenderer",
            "dojo/domReady!"
        ]).then(([Map, number, InfoTemplate, FeatureLayer, HeatmapRenderer]) => {
            const map = new Map('mapCon', {
                basemap: 'topo-vector',
                center: [-103, 18],
                zoom: 3
            });
            
            var infoTemplate = new InfoTemplate("Attributes", "Name: ${Name}<br>Magnitude: ${Magnitude:formatMagnitude}");

            var serviceURL = "//services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Earthquakes_Since_1970/FeatureServer/0";
            var heatmapFeatureLayerOptions = {
            mode: FeatureLayer.MODE_SNAPSHOT,
            outFields: ["Name", "Magnitude"],
            infoTemplate: infoTemplate
            };
            var heatmapFeatureLayer = new FeatureLayer(serviceURL, heatmapFeatureLayerOptions);

            var heatmapRenderer = new HeatmapRenderer({
            field: "Magnitude",
            blurRadius: 10,
            maxPixelIntensity: 100,
            minPixelIntensity: 0
            });

            heatmapFeatureLayer.setRenderer(heatmapRenderer);
            map.addLayer(heatmapFeatureLayer);
        }).catch(err => {
            console.error(err)
        })
    }
    
    useEffect(() => {
        return componentDid();
    }, []);

    function componentWillUn() {}

    useEffect(() => () => {
        return componentWillUn();
    }, []);

    return (
        <div>
            <div id="mapCon"></div>
        </div> 
    )
}
